<template>
	<view class="content">
		<tab ref="tab" @tabChange="tabChange" :list="list" :stickyTop="0"></tab>
		<view class="assetsList">
			<!--总计-->
			<view class="amount-count">
				<view class="left">过往记录</view>
				<view class="right">
					<view class="text" v-if="(active === 0 || active === 1) && list[active].subData"
						>收入：¥{{ list[active].subData.income }}</view
					>
					<view class="text" v-if="(active === 0 || active === 2) && list[active].subData"
						>支出：¥{{ list[active].subData.pay }}</view
					>
				</view>
			</view>

			<assets
				v-for="(assetsItem, assetsIndex) in list[active].goodsList"
				:key="assetsIndex"
				:assetsItem="assetsItem"
			></assets>

			<!-- 加载中插件 -->
			<load-more
				:loading="list[active].loading"
				:finished="list[active].finished"
				:empty="list[active].empty"
				emptyText="暂无记录~"
			></load-more>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import loader from '@/utils/mixin/loader';
import LoadMore from '@/components/LoadMore';
import Assets from '@/components/member/AssetsItem';
import Tab from '@/components/uni/Tab';
export default {
	name: 'assetsItem',
	components: {
		Assets,
		LoadMore,
		Tab
	},
	mixins: [loader],
	data() {
		return {};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	computed: {
		flist() {
			return this.list.map(e => {
				if (e.subData) {
					e.subData.income = parseFloat(e.subData.income).toFixed(2);
					e.subData.pay = parseFloat(e.subData.pay).toFixed(2);
				}
				return e;
			});
		}
	},
	methods: {
		// 页面初始化
		init() {
			// 获取&创建一级分类
			let arr = [{ label: '全部' }, { label: '收入' }, { label: '支出' }];
			arr.forEach(item => {
				item.loading = false;
				item.finished = false;
				item.empty = false;
				item.page = 1;
				item.goodsList = [];
			});
			this.list = arr;
			this.loadMore(this.list[0]);
		},
		// 加载前参数处理
		beforeLoad() {
			if (this.active === 0) {
				this.params.type = 0;
			} else if (this.active === 1) {
				this.params.type = 1;
			} else if (this.active === 2) {
				this.params.type = 2;
			} else {
				delete this.params.type;
			}
			this.service = this.$service.member.incomelog.page(this.params);
			return true;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	height: 100vh;
	.assetsList {
		padding-bottom: 30rpx;
		/deep/.assets-item {
			padding: 34rpx 20rpx;
		}
		.amount-count {
			width: 100%;
			padding: 10rpx 38rpx;
			box-sizing: border-box;
			@include flexBox(space-between, center);
			.left {
				font-size: 28rpx;
				color: #171717;
			}
			.right {
				font-size: 24rpx;
				color: #717076;
			}
		}
	}
}
</style>
